<template>
  <a-layout>
    <!--    头部区域-->
    <a-layout-header class="header">
      <div>
        <img src="../assets/header.png" alt="">
        <span style="color: white">资产管理系统</span>
      </div>

      <a-button type="primary" @click="logout">退出登录</a-button>
    </a-layout-header>
    <a-layout>

      <!--侧边栏菜单区-->
      <a-layout-sider width="200" style="background: #fff">

        <a-menu
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            mode="inline"

            :style="{ height: '100%', borderRight: 0 }"
        >

          <a-sub-menu v-for="item in menuList" :key="item.path">
            <template #title>
              <span>
                <user-outlined/>
                {{ item.authName }}
              </span>
            </template>
            <a-menu-item :key="i.path" v-for="i in item.children">
              <router-link tag='div' :to="'/'+i.path">
                {{ i.authName }}
              </router-link>

            </a-menu-item>
          </a-sub-menu>


        </a-menu>
      </a-layout-sider>

      <a-layout style="padding: 0 24px 24px">
        <!--         面包屑导航区  -->
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>
            <router-link to="/home">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>资产管理</a-breadcrumb-item>
          <a-breadcrumb-item>资产列表</a-breadcrumb-item>
        </a-breadcrumb>

        <!--   content 区域-->
        <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
          <router-view/>
        </a-layout-content>

      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import {UserOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons-vue';
import {defineComponent, onBeforeMount, ref} from 'vue';
import router from "@/router/router";
import {getMenu} from "@/apis/menu";

export default defineComponent({
  components: {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
  },

  setup() {

    const selectedKeys = ref([]);
    const openKeys = ref(['sys']);
    openKeys.value.push('sys')
    let menuList = ref([])

    onBeforeMount(() => {
      getMenu().then(res => {
        menuList.value = res.data;
      })
    })

    const logout = () => {
      sessionStorage.clear();
      router.push("/login")
    }

    return {
      menuList,
      logout,
      collapsed: ref(false),
      selectedKeys,
      openKeys,
    };
  },

});
</script>
<style lang="less">
.ant-layout {
  height: 100%;
}

.ant-layout-header{
}

.header {
  display: flex;
  // 左右贴边对齐
  justify-content: space-between;
  // 移除左边空白
  padding-left: 0;
  // 居中
  align-items: center;
  color: #ffffff;
  font-size: 20px;

  background-color: #1890ff;
  span {
    margin-left: 15px;
  }
}
</style>